<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:40px;line-height:40px;margin: 50px auto;}
        .box span{display: block;height:40px;border: solid 1px black;}
        .box ul{margin: 0;padding:0;list-style: none;border:solid 1px black;border-top:none;display: none;}
        .box ul li{text-indent: 4px;display: flex;}
        .box ul li.hover{background: #66f;color: #fff;}
        .box ul li#active::after{content:"*";margin-left: auto;margin-right: 20px;}
    </style>
</head>
<body>
    <select>
        <option>上海1</option>
        <option>上海2</option>
        <option>上海3</option>
        <option>上海4</option>
        <option>上海5</option>
        <option>上海6</option>
        <option>上海7</option>
        <option>上海8</option>
     
    </select>
    <div class="box">
        <span></span>
        <ul>
            <li>上海1</li>
            <li>上海2</li>
            <li>上海3</li>
            <li>上海4</li>
            <li>上海5</li>
            <li>上海6</li>
        </ul>
    </div>
</body>
<script>
    var index = 0;

    var obox = document.querySelector('.box')
    var ospan = document.querySelector('.box span')
    var oul = document.querySelector('.box ul')
    var oli = oul.children;
    console.log(oul)
    ospan.innerHTML= oli[index].innerHTML;
    oli[index].id = 'active';
    

    var flag=0;
    ospan.onclick =function(eve){
      var e = eve || window.event;
      e.stopPropagation();

        if(flag ===0){
            oul.style.display = 'block'
            flag=1; 
        }else{
            oul.style.display = 'none' 
            flag=0;
        }
    }
    document.onclick = function(){
        oul.style.display = 'none' 
        flag=0;
    }
     for(var i =0;i<oli.length;i++){
        oli[i].onmouseout = function(){
            this.className= 'hover'
        }
        oli[i].onmouseout = function(){
            this.className= ''
        }
     }
    
</script>
</html>